<template>
    <div class="dy-second">
        <c-title>
            {{title}}
        </c-title>
        <div class="dy-second-none" v-if="video.length < 1">
            暂时没有获奖名单，敬请期待
        </div>
        <div class="dy-second-content" v-if="video.length > 0">
            <div class="dy-content-item" v-for="(item,index) in video">
                <div class="img-response">
                    <img :src="item.img" alt="">
                </div>
                <div class="dy-second-title">
                    {{item.signature}}
                </div>
                <div>
                    <span>{{item.name}}</span>
                    <span>{{item.age}}岁</span>
                </div>
                <div class="dy-second-text">
                    <span>{{item.school}}</span>
                    <span>{{item.class}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import cTitle from './c-title.vue';
    export default {
        name:'dynamic',

        props:['title','video'],

        data() {
            return {

            }
        },

        components:{
            cTitle
        },
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import "../../../plugins/assets/css/flex.less";
    .dy-first{
        .flex-between;
        &-left {
            width: 40%;
            img {
                width: 100%;
            }
        }
        &-right {
            width: 55%;
            line-height:26px;
            .first-right-item {
                margin-bottom:30px;
            }
            .item-title {
                font-weight:bold;
                font-size:24px;
                margin-bottom:10px;
            }
            .item-text {
                color: #666666;
            }
        }
    }
    .dy-second-none{
        font-size:18px;
        text-align: center;
        margin-bottom:40px;
        font-weight:bold;
    }
    .dy-second-content{
        margin:50px 0;
        .flex-between;
        .dy-content-item {
            .box-sizing;
            width: 23%;
            padding: 5px;
            background: #fff;
            font-size:12px;
            > div {
                margin-bottom: 10px;
                span {
                    margin-right: 10px;
                }
            }
            > :nth-child(2), > :nth-child(3) {
                font-weight:bold;
            }
        }
    }
    .c-first{
        width: 50%;
        margin: 50px auto;
    }
</style>